import { View, Text } from "@tarojs/components";
import { useEffect, useState } from "react";
import { AtTabs, AtTabsPane } from "taro-ui";
import { AtGrid } from "taro-ui";
import "./index.scss";
import Taro from "@tarojs/taro";
import { ImageUrl } from "../../../../utils/request";
import {
  getSecondaryCategory,
  getAllCategory
} from "../../../../api/category/index";
import { AtGridItem } from "taro-ui/types/grid";
type allCategoryType = {
  image: string;
  value: string;
};

type secondaryTagType = {
  categoryId: number;
  categoryName: string;
  createTime: string;
  parentId: number;
  picture: string;
  updateTime: string;
};

type GridType = {
  id: number;
  image: string;
  value: string;
};

type TablistType = {
  id: number;
  title: string;
};

export default () => {
  const [current, SetCurrent] = useState<number>(0);
  const [secondaryTag, SetSecondaryTag] = useState<GridType[]>();
  const [allCategory, SetAllcategory] = useState<secondaryTagType[]>();
  const [tabList, SetTabList] = useState<TablistType[]>();
  useEffect(() => {
    getSecondaryCategory().then(resp => {
      const list = [];
      resp.map(item => {
        list.push({
          id: item.categoryId,
          image: ImageUrl + item.picture,
          value: item.categoryName
        });
      });
      SetSecondaryTag(list);
    });

    getAllCategory().then(i => {
      SetAllcategory(i);
      initTabList(i);
    });
  }, []);
  const initTabList = (data: secondaryTagType[]) => {
    const list = [];
    list.push({
      title: "精选分类"
    });
    data
      .filter(item => item.parentId == 0)
      .forEach(item => {
        list.push({
          id: item.categoryId,
          title: item.categoryName
        });
      });
    SetTabList(list);
  };

  const renderAtGrid = index => {
    const list = [];
    const t = current;
    const temp = tabList[index];

    allCategory
      .filter(item => item.parentId == temp.id)
      .forEach(item => {
        list.push({
          id: item.categoryId,
          image: ImageUrl + item.picture,
          value: item.categoryName
        });
      });

    return (
      <AtGrid
        columnNum={5}
        hasBorder={false}
        data={list}
        onClick={(item: AtGridItem, index: number, _) => {
          Taro.reLaunch({
            url: "/pages/list/index?id=" + item.id
          });
        }}
      />
    );
  };

  const handleClick = (value: number) => {
    SetCurrent(value);
  };
  return (
    <View>
      <AtTabs
        scroll
        current={current}
        tabList={tabList}
        onClick={index => {
          handleClick(index);
        }}
      >
        {tabList &&
          tabList.map((item, index) => {
            if (index == 0) {
              return (
                <AtTabsPane current={current} index={0}>
                  <View
                    style={{
                      marginTop: 5,
                      backgroundColor: "#fffffd",
                      borderRadius: 25,
                      paddingTop: 10
                    }}
                  >
                    <AtGrid
                      columnNum={5}
                      hasBorder={false}
                      data={secondaryTag}
                      onClick={(item: AtGridItem, index: number, _) => {
                        console.log("/pages/list/index?id=" + item.id);

                        Taro.reLaunch({
                          url: "/pages/list/index?id=" + item.id
                        });
                      }}
                    />
                  </View>
                </AtTabsPane>
              );
            }
            return (
              <AtTabsPane current={current} index={index}>
                <View
                  style={{
                    marginTop: 5,
                    backgroundColor: "#fffffd",
                    borderRadius: 25,
                    paddingTop: 10
                  }}
                >
                  {renderAtGrid(index)}
                </View>
              </AtTabsPane>
            );
          })}
      </AtTabs>
    </View>
  );
};
